<template>
  <el-row>
    <el-card>
      <el-col :span="24">
        <div class="table_content" style="margin-bottom: 1px">
          <el-row :gutter="4">
            <el-form
              :inline="true"
              label-position="left"
              class="demo-form-inline"
              label-width="100px"
            >
              <el-form-item>
                <el-input
                  v-model="searchDto.keywords"
                  placeholder="请输入关键字"
                  style="width:250px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="searchDto.itemId" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="search">
                  查询
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-s-open" type="primary" @click="clear">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </div>
        <div class="table_content">
          <page-table
            ref="multipleSelection"
            :page-data="columnTree"
            :loading="loading"
            :do-get-page-data="getPageData"
          >
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="100px"
            ></el-table-column>
            <el-table-column label="标题" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <a
                  style="color: #409eff;cursor: pointer;"
                  @click="editColumn(scope.row)"
                >
                  {{ scope.row.title }}
                </a>
              </template>
            </el-table-column>
            <el-table-column
              width="220"
              prop="itemName"
              label="栏目"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              width="220"
              prop="createUserName"
              label="创建人"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              width="220"
              prop="createTime"
              label="创建时间"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="管理"
              width="200"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-tooltip content="查看" placement="top">
                  <el-button
                    type="button"
                    size="mini"
                    icon="el-icon-view"
                    @click="editColumn(scope.row)"
                  >
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </page-table>
        </div>
      </el-col>
    </el-card>
  </el-row>
</template>
<script>
import _ from "lodash";
export default {
  name: "show",
  created() {
    this.getPageData();
    this.API.getArticleList().then(ret => {
      this.options = ret.data;
    });
  },
  mounted() {},
  data() {
    return {
      options: [],
      loading: false,
      searchDto: {
        pageSize: 10,
        pageIndex: 1,
        keywords: "",
        itemId: ""
      },
      columnTree: {}
    };
  },
  methods: {
    // 获取分页数据
    getPageData() {
      let tem = this.searchDto;
      tem.status = "PUBLISHED";
      this.API.getNewsArticlePageList(tem).then(ret => {
        this.columnTree = ret.data;
      });
    },
    //编辑
    editColumn(row) {
      this.$router.push({ name: "showDetail", params: { row } });
    },
    // 查询
    search() {
      this.getPageData();
    },
    //清空
    clear() {
      this.searchDto = {
        pageSize: 10,
        keywords: ""
      };
      this.getPageData();
    }
  }
};
</script>
<style scoped></style>
